<template>
  <scroll-view @scrolltolower="handleToLower" scroll-y class="recommend_main">
    <!-- 推荐 开始 -->
    <view class="recommend_wrap">
      <navigator
        :url="`/pages/album/index?id=${item.target}`"
        class="recommend_item"
        v-for="item in recommend"
        :key="item.id"
      >
        <image mode="widthFix" :src="item.thumb"></image>
      </navigator>
    </view>
    <!-- 推荐 结束 -->
    <!-- 月份 开始 -->
    <view class="monthes_wrap">
      <view class="monthes_title">
        <view class="monthes_title_info">
          <view class="monthes_info">
            <text>{{ monthes.DD }} / </text> {{ monthes.MM }} 月
          </view>
          <view class="monthes_text">
            {{ monthes.title }}
          </view>
        </view>
        <view class="monthes_more">
          更多 >
        </view>
      </view>
      <!-- 内容 -->
      <view class="monthes_content">
        <view
          class="monthes_item"
          v-for="(item, index) in monthes.items"
          :key="item.id"
        >
          <view
            class="priview"
            @click="previewImg($event)"
            :data-url="item.thumb + item.rule.replace('$<Height>', 360)"
          >
            <image
              mode="aspectFill"
              :src="item.thumb + item.rule.replace('$<Height>', 360)"
            ></image>
          </view>
          <go-detail :list="monthes.items" :index="index">
            <view class="iconfont icon-yanjing"> 详情</view>
          </go-detail>
        </view>
      </view>
    </view>
    <!-- 月份 结束 -->

    <!-- 热门 -->
    <view class="hots_content">
      <view class="hots_title"><text>热门</text></view>
      <view class="img_wrap">
        <view class="hots_item" v-for="item in hots" :key="item.id">
          <view
            class="preview"
            @click="previewImage($event)"
            :data-url="item.thumb"
          >
            <image mode="aspectFill" :src="item.thumb"></image>
          </view>
          <!-- <go-detail :list="hots" :index="index">
            <view
              url="/pages/imgDetail/index"
              class="iconfont icon-yanjing"
            >
              详情</view
            >
          </go-detail> -->
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import moment from "moment";
import goDetail from "@/components/goDetail";
export default {
  components: {
    goDetail,
  },
  data() {
    return {
      //推荐列表
      recommend: [],
      //月份
      monthes: {},
      //热门
      hots: [],
      //请求参数
      params: {
        //要获取多少条
        limit: 30,
        //关键字
        order: "hot",
        //要跳过多少条
        skip: 0,
      },
      //是否否有下一页
      isMore: true,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    //获取数据
    getList() {
      //发送请求
      this.request({
        url: "http://157.122.54.189:9088/image/v3/homepage/vertical",
        data: this.params,
      }).then((res) => {
        //判断是否有下一页
        if (res.res.vertical.length === 0) {
          //没有下一页，把isMore改为false
          this.isMore = false;
          //显示没有更多了
          uni.showToast({
            title: "o(╥﹏╥)o没有更多数据了",
            icon: "none",
          });
          //阻止向下执行
          return;
        }

        if (this.recommend.length === 0) {
          //第一次发请求
          this.recommend = res.res.homepage[1].items;
          this.monthes = res.res.homepage[2];
          this.monthes.MM = moment(this.monthes.stime).format("MM");
          this.monthes.DD = moment(this.monthes.stime).format("DD");
        }
        //要对原有的数据进行拼接
        this.hots = [...this.hots, ...res.res.vertical];
        console.log(res);
        console.log(this.hots);
      });
      //判断是否有下一页数据
    },
    // 滚动条触底事件
    handleToLower() {
      /**
       * 修改参数 跳过的条数就是限制的条数的累加 skip += limit
       * 重新发请求getList()
       */
      if (this.isMore) {
        //有更多数据
        // 修改参数 跳过的条数就是限制的条数的累加 skip += limit
        this.params.skip += this.params.limit;
        //重新发送求
        this.getList();
      } else {
        //没有更多数据
        uni.showToast({
          title: "o(╥﹏╥)o没有更多数据了",
          icon: "none",
        });
      }
    },
    //预览图片
    previewImg(e) {
      const current = e.currentTarget.dataset.url;
      const urls = this.monthes.items.map(
        (v) => v.thumb + v.rule.replace("$<Height>", 360)
      );
      this.showImg(current, urls);
    },
    previewImage(e) {
      // console.log('预览')
      //接收点击的的图片路径
      const current = e.currentTarget.dataset.url;
      //先构造要预览的图片数组
      const urls = this.hots.map((v) => v.thumb);
      this.showImg(current, urls);
    },
    //
    showImg(current, urls) {
      wx.previewImage({
        current,
        urls,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.recommend_main {
  // height：屏幕的高度 -  头部标题的高度
  height: calc(100vh - 36px);
  // padding-bottom: 60rpx;
}
.recommend_wrap {
  display: flex;
  flex-wrap: wrap;
  .recommend_item {
    width: 50%;
    border: 5rpx solid #fff;
  }
}
.monthes_wrap {
  .monthes_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #d83886;
    font-size: 24rpx;
    padding: 20rpx;
    font-weight: 600;
    .monthes_title_info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .monthes_info {
        text {
          margin-right: 8rpx;
          font-size: 32rpx;
        }
      }

      .monthes_text {
        margin-left: 18rpx;
        color: #666;
        font-size: 32rpx;
        font-weight: 600;
      }
    }

    .monthes_more {
    }
  }
  .monthes_content {
    display: flex;
    flex-wrap: wrap;
    .monthes_item {
      width: 33.33%;
      border: 3rpx solid #fff;
      .icon-yanjing {
        text-align: center;
        font-size: 28rpx;
      }
      .icon-yanjing:hover {
        background-color: #eee;
      }
    }
  }
}
.hots_content {
  .hots_title {
    padding: 20rpx;
    color: #d83886;
    font-weight: 600;
    text {
      text-align: center;
      padding-left: 16rpx;
      border-left: 5rpx solid #d83886;
    }
  }
  .img_wrap {
    display: flex;
    flex-wrap: wrap;
    .hots_item {
      width: 33.33%;
      border: 3rpx solid #fff;
      .icon-yanjing {
        text-align: center;
        font-size: 28rpx;
      }
      .icon-yanjing:hover {
        background-color: #eee;
      }
      image {
      }
    }
  }
}
</style>
